{% extends './template/indexOption.html' %}

{% block indexOption %}

<link rel="icon" href="/images/上方小图标/位图/上方小图标.png">
<title>设置</title>
<link rel="stylesheet" href="/css/view/setting.css">

<body>
  <div class="big-box">

    <!-- 背景图 -->
    <div class="top-img">
      <img class="userPortrait" src="/images/public/位图/我的头像.jpg" alt="头像">
      <input class="file" type="file" hidden />
    </div>

    <div class="box-bottom">
      <br>
      <a href="/">返回我的主页></a>
      <br><br>

      <!-- 所有资料盒子 -->
      <div class="data-box">
        <h4>基本信息</h4>
        <br><br>
        <p>昵称</p>
        <input type="text" placeholder="请输入昵称">
        <br><br>
        <p>性别</p>
        <select class="select-int">
          <option value="">男</option>
          <option value="">女</option>
          <option value="">保密</option>
        </select>
        <br><br>
        <p>城市</p>
        <select class="city" id="province" runat="server" onchange="selectprovince(this);"></select>
        <select class="city" id="city" runat="server" style="margin: 0px;"></select>
        <br><br>
        <p>感情状况</p>
        <select class="select-int">
          <option value="">单身</option>
          <option value="">恋爱中</option>
          <option value="">暗恋中</option>
          <option value="">暧昧中</option>
          <option value="">求交往</option>
          <option value="">订婚</option>
          <option value="">已婚</option>
          <option value="">保密</option>
        </select>
        <br><br>
        <p>血型</p>
        <select class="select-int">
          <option value="">A型</option>
          <option value="">B型</option>
          <option value="">AB型</option>
          <option value="">O型</option>
        </select>
        <br><br>
        <p class="autographTitle">个性签名</p>
        <!-- 个性签名最多输入30字 -->
        <textarea class="autograph" placeholder="编辑你的个性签名" maxlength="30"></textarea>
        <br><br>
        <div class="setting-btn-box">
          <button class="setting-btn">保存</button>
        </div>
        <br><br><br>
        <h4>联系信息</h4>
        <br><br>
        <p>邮箱</p>
        <input type="text" placeholder="填写你的邮箱">
        <br><br>
        <p>QQ</p>
        <input type="text" placeholder="填写你的QQ">
        <br><br>
        <div class="setting-btn-box">
          <button class="setting-btn">保存</button>
        </div>
        <br><br><br>
        <h4>更改密码</h4>
        <br><br>
        <p>原始密码</p>
        <input type="text" placeholder="输入原始密码">
        <br><br>
        <p>新密码</p>
        <input type="text" placeholder="输入新密码">
        <br><br>
        <p>确认密码</p>
        <input type="text" placeholder="确认新密码">
        <br><br>
        <div class="setting-btn-box">
          <button class="setting-btn">保存</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 更换头像的模态框 -->
  <div class="backgroundReplaceBox">
    <div class="replaceBox">
      <div class="top">
        <h3>更换头像</h3>
      </div>
      <div class="middle">
        <div class="middle-left">
          <!-- 头像 -->
          <div>
            <img class="headPortrait" src="/images/public/位图/我的头像.jpg" alt="">
          </div>
        </div>
        <!-- 预览框 大中小 -->
        <div class="middle-right">
          <p class="preview">预览</p>
          <p class="textBig">大</p>
          <div class="previewBig">
            <img class="headPortrait" src="/images/public/位图/我的头像.jpg" alt="">
          </div>
          <p class="textMiddle">中</p>
          <div class="previewMiddle">
            <img class="headPortrait" src="/images/public/位图/我的头像.jpg" alt="">
          </div>
          <p class="textSmall">小</p>
          <div class="previewSmall">
            <img class="headPortrait" src="/images/public/位图/我的头像.jpg" alt="">
          </div>
        </div>
      </div>
      <input class="file" type="file" hidden>
      <div class="fileButton">选择文件</div>
      <div class="bottomBox">
        <div>
          <button class="preservation">保存</button>
        </div>
        <div>
          <button class="cancel">取消</button>
        </div>
      </div>
    </div>
  </div>

  <script src="/js/myJS/My_JS.js"></script>
  <script src="/js/city.js"></script>

  <script>
    // 点击头像 更换头像的模态框显示出来
    $(".userPortrait").onclick = function () {
      $(".backgroundReplaceBox").style.display = "block";
    };

    // 关闭更换头像的模态框
    $(".cancel").onclick = function () {
      $(".backgroundReplaceBox").style.display = "none";
    };

    // 选择文件 预览需要上传的文件
    $('.fileButton').onclick = function () {
      $(".file").click()
      $(".file").onchange = function () {
        console.log("触发事件")
        const blogImg = window.URL.createObjectURL($(".file").files[0])
        let headPortrait = $Al(".headPortrait"); // 获取到需要改变的预览头像
        for (let i = 0; i < headPortrait.length; i++) {
          headPortrait[i].setAttribute("src", blogImg);
        }
        // 将 value 清空 解决相同文件不触发 onchange 事件问题
        $(".file").value = "";
      }
    }
  </script>
</body>

{% endblock %}